<template>
  <a-table

    :columns="columns"
    :data-source="data"
    :pagination="pagination"
  >
    <template slot="tags" slot-scope="tags">
      <a-tag v-for="tag in tags" :key="tag" color="blue">{{ tag }}</a-tag>
    </template>

    <template #actions="text, row">
      <div class="actions-container">
        <a @click.prevent="handlerRow(row)">编辑</a>
        <a href="javascript:;" @click.prevent="showConfirm()">删除</a>
      </div>
    </template>

  </a-table>

  
  
</template>
<script>
const columns = [
  {
    title: '指标名称',
    dataIndex: 'name',
  },
  {
    title: '指标描述',
    dataIndex: 'desc',
  },
  // {
  //   title: '包含指标',
  //   dataIndex: 'tags',
  //   copedSlots: { customRender: 'tags' },
  // },
  {
    title: '指标类型',
    dataIndex: 'tags',
    copedSlots: { customRender: 'tags' },
  },
  {
    title: '创建人',
    dataIndex: 'create_user',
  },
  {
    title: '创建时间',
    dataIndex: 'create_time',
  },
  {
    title: '操作',
    dataIndex: 'actions',
    scopedSlots: { customRender: 'actions' },
  },
]

const data = [
  {
    name: '规则名称1',
    desc: '规则描述1',
    tags: 'T/F类型',
    create_user: 'Alice',
    create_time: '09/09/2021',
  },
   {
    name: '规则名称2',
    desc: '规则描述2',
    tags: '分值类型',
    create_user: 'Alice',
    create_time: '09/09/2021',
  },
    {
    name: '规则名称3',
    desc: '规则描述2',
    tags: '公式类型',
    create_user: 'Alice',
    create_time: '09/09/2021',
  },
]

export default {
  data () {
    return {
      data,
      columns,
      pagination: {
        defaultPageSize:5,
        showTotal:total => `共${total}条数据`,
        showSizeChanger:true,
        pageSizeOptions:['5','10','15','20'],
        onShowSizeChange:(current, pageSize) => this.pageSize = pageSize
      }
    }
  },

  methods: {
    showConfirm() {
      this.$confirm({
        title: '是否删除',
        // content: 'When clicked the OK button, this dialog will be closed after 1 second',
        onOk() {
          return new Promise((resolve, reject) => {
            setTimeout(Math.random() > 0.5 ? resolve : reject, 1000);
          }).catch(() => console.log('Oops errors!'));
        },
        onCancel() {},
      });
    },
    handlerRow (row) {
      console.log('row', row)
      this.$router.push({
        name: 'ModifyQuota',
        params: {
          id: 'xxx',
          type: row.tags
        },
      })
    },
    onChange(pageNumber) {
      console.log('Page: ', pageNumber);
    }
  },
}
</script>

<style lang="scss" scoped>
.actions-container {
  & > a {
    margin: 0 $margin-base;
  }
}
</style>
